<template>
	<view>
	<van-tabs
		animated
		sticky
		color="#4177f6"
		:active="active"
		@change="tabChange"
	>
		<van-tab title="待审核" name="approved">
			<view  class="tab">
				<view class="user_info_item" v-for="item in clubMemebrs">
				    <image class="avatar" :src="item.avatar_url" mode="aspectFill"></image>
				    <view class="username">{{ item.name }}  申请加入社团</view>
				    <van-icon @click="showOptions(item)" class="options" name="more-o" />
				</view>
			</view>
		
			
		</van-tab>
		<van-tab title="已拒绝"  name="pending">
			<view class="user_info_item" v-for="item in clubMemebrs">
			    <image class="avatar" :src="item.avatar_url" mode="aspectFill"></image>
			    <view class="username">{{ item.name }}  申请加入社团</view>
			    <van-icon @click="showOptions(item)" class="options" name="more-o" />
			</view>
		</van-tab>
	</van-tabs>	
	<view class="loading" v-if="clubMemebrs.length === 0">暂无数据～～</view>
	 <van-action-sheet :show="isOptionsShow" :actions="action" cancel-text="取消" @cancel="onMemberOptionsClose" @close="onMemberOptionsClose" @select="onMemberOptionsSelect" />
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'	
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'

import useClubStore from '@/store/club.js'
import { LIMIT } from '@/global/contants.js'

// 获取需要审核的数据
const clubStore = useClubStore()
const { clubMemebrs } = storeToRefs(clubStore)
const clubId = ref()
onLoad((options) => {
	const { club_id } = options
	clubId.value = club_id
	clubStore.getClubMemberByClubIdAction({id:club_id,limit: LIMIT,status:'pending'})
})

// tab切换
const active = ref('approved')
function tabChange(e) {
	if(e.target.index === 0) {
		active.value = 'approved'
		clubStore.getClubMemberByClubIdAction({id:clubId.value,limit: LIMIT,status:'pending'})
	}else {
		active.value = 'rejected'
		
		clubStore.getClubMemberByClubIdAction({id:clubId.value,limit: LIMIT,status:'rejected'})
	}
}


// 审核的操作
const action = computed(() => {
	return [{name:'同意'}, {name: active.value === 'approved' ? '拒绝' : '删除' }]
})
const removeMemberInfo = ref('')
const isOptionsShow = ref(false)
function showOptions(item) {
	isOptionsShow.value = true
	removeMemberInfo.value = item
}
function onMemberOptionsClose() {
	isOptionsShow.value = false
}
function onMemberOptionsSelect(e) {
	if(e.detail.name === '同意') {
		clubStore.setClubMemberStatusAction(clubId.value, removeMemberInfo.value.user_id, 'active')
	}else if(e.detail.name === '拒绝') {
		clubStore.setClubMemberStatusAction(clubId.value, removeMemberInfo.value.user_id, 'rejected')
	}else {
		clubStore.deleteClubMemebrAction(clubId.value, removeMemberInfo.value.user_id)
	}
}

</script>

<style lang="less">
.user_info_item {
    background-color: #fff;
    display: flex;
    align-items: center;
    margin: 10rpx 0;         
    padding: 15rpx 30rpx;
	.avatar {         
		width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        margin-right: 25rpx;
    }
    .username {
        flex: 1;
        font-size: 30rpx;
    }
	.options{
	    margin-right: 50rpx;
	    font-weight: 700;
	    font-size: 45rpx;
	    color: var(--lightTextColor);
	}
}
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
}
</style>
